<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta  charset="utf-8" />
	<title>js+css3带星期和日期时钟代码</title>
	<style type="text/css">
		#box{
			width:206px;
			height:206px;
			border-radius:50%;
			margin:100px auto;
			background:black;
			position:relative;
			/*表盘外圈阴影*/
			box-shadow:2px 2px 5px #b2b2b2,2px -2px 5px #b2b2b2,-2px 2px 5px #b2b2b2,-2px -2px 5px #b2b2b2,4px 4px 6px #b87333,4px -4px 6px #b87333,-4px 4px 6px #b87333,-4px -4px 6px #b87333;
		}
		#dial{
			height:200px;
			border:3px solid #b87333;
			border-radius:50%;
			position:relative;
		}
		/*刻度*/
		#dial span{
			width:2px;
			height:6px;
			background:#b87333;
			/*通过定位，将刻度设置在表盘中心点上，表盘的直径是200px*/
			position:absolute;
			top:0;
			left:99px; 
			
			/*transform设置元素变形时的参考点,X方向在中心，Y方向上表盘四周，形成圆形的表盘刻度*/
			transform-origin:0 100px;
			-webkit-transform-origin:0 100px;
			-moz-transform-origin:0 100px;
		}
		/*突出显示5分钟处的刻度*/
		#dial span:nth-child(5n+1){
			height:10px;		
		}
		/*指针*/
		/*父元素是box,box的宽高是206,206/2=12/2+97*/
		#hand{
			width:12px;
			height:12px;
			position:absolute;
			top:97px;
			left:97px;			
		}
		/*时针*/
		/*父元素是hand,hand的宽高是12,12/2=6/2+3*/
		#hour{
			width:6px;
			height:45px;
			background:#b87333;
			position:absolute;
			left:3px;
			bottom:6px;
			
			transform-origin:bottom;
			-webkit-transform-origin:bottom;
			-moz-transform-origin:bottom;
		}
		/*分针*/
		#min{
			width:2px;
			height:60px;
			background:#b87333;
			position:absolute;
			left:5px;
			bottom:6px;
			
			transform-origin:bottom;
			-webkit-transform-origin:bottom;
			-moz-transform-origin:bottom;
		}
		/*秒针*/
		#sec{
			width:2px;
			height:75px;
			background:#b87333;
			position:absolute;
			left:5px;
			bottom:6px;
			
			transform-origin:bottom;
			-webkit-transform-origin:bottom;
			-moz-transform-origin:bottom;
		}
		/*中心点*/
		#center{
			width:12px;
			height:12px;
			border-radius:50%;
			background:#b87333;
			position:absolute;
			top:0;
			left:0;
		}

		/*表盘*/
		.gradient{
			width:206px;
			height:206px;
			border-radius:50%;
			position:absolute;
			top:0;
			left:0;
			/*表盘颜色*/
			/*linear-gradien：线性渐变*/
			background:linear-gradient(180deg,transparent,rgba(0,0,255,0.7));
			background:-webkit-linear-gradient(180deg,transparent,rgba(0,0,255,0.7));
			background:-moz-linear-gradient(180deg,transparent,rgba(0,0,255,0.7));
		}
		/*日历窗口*/
		#win{
			background:white;
			width:40px;
			height:16px;
			position:absolute;
			left:140px;
			top:94px;
			font-size:12px;
			text-align:center;
			/*阴影*/
			box-shadow:2px 2px 2px #b87333 inset,-1px -1px 2px #b87333 inset;
		}	
	</style>

	<script type="text/javascript">
		window.onload=function(){
			var oDial=document.getElementById('dial');
			var oHour=document.getElementById('hour');
			var oMin=document.getElementById('min');
			var oSec=document.getElementById('sec');
			
			//调用toDial函数，设置span标签的样式及转动角度
			toDial(oDial);

			// 调用toTime函数，让指针转动
			toTime(oHour,oMin,oSec);

			//每1秒钟执行一次toTime函数
			setInterval(function(){
				toTime(oHour,oMin,oSec);
			},1000)
			
			//创建Date对象，并获取星期和日期。
			var oDate=new Date();
			var week=oDate.getDay(); //返回值0-6
			var date=oDate.getDate();
			
			//创建数组、生成日历并写入文档流中
			var array=['日','一','二','三','四','五','六'];
			var win=document.getElementById('win');
			var str="<a>"+array[week]+"</a>|<a>"+date+"</a>";
			win.innerHTML=str;
		}

		// 功能是让指针转动
		function toTime(oHour,oMin,oSec){
			var oDate=new Date();
			var iSec=oDate.getSeconds();
			var iMin=oDate.getMinutes()+iSec/60; //加上秒的小数，分钟可平滑移动。
			var iHour=oDate.getHours()+iMin/60; //同上
			// transform:rotate 设置旋转度数。
			oSec.style.webkitTransform="rotate("+(iSec*360/60)+"deg)";
			oMin.style.webkitTransform="rotate("+(iMin*360/60)+"deg)";
			oHour.style.webkitTransform="rotate("+(iHour*360/12)+"deg)";
			oSec.style.MozTransform="rotate("+(iSec*360/60)+"deg)";
			oMin.style.MozTransform="rotate("+(iMin*360/60)+"deg)";
			oHour.style.MozTransform="rotate("+(iHour*360/12)+"deg)";			
		}

		function toDial(obj){
			var sHtml="";
			var iDeg=6;
			for(var i=0;i<60;i++){	
				//设置span标签的样式，以及指针的旋转的角度	
				sHtml+="<span style='-webkit-transform:rotate("+iDeg*i+"deg)'></span>";
				sHtml+="<span style='-moz-transform:rotate("+iDeg*i+"deg)'></span>"		
			}
			//写入文档流，并用innerHTML解析span标签及样式
			obj.innerHTML=sHtml;
		}	
	</script>
</head>

<body>
	<div id="box">
		<div id="dial"></div>
		<div id="win"></div>
		<div id="hand">
			<div id="hour"><span></span></div>
			<div id="min"><span></span></div>
			<div id="sec"><span></span></div>
			<div id="center"></div>
		</div>
		<div class="gradient"></div>
	</div>
</body>
</html>